<!-- 文章大纲 -->
<script setup lang="ts" name="outlineArt">
import useReaderFile from '@/components/workBench/hooks/readerFile'
const { input, uploadFile, readerFile } = useReaderFile()
</script>

<template>
  <div id="outline" @click="uploadFile">
    <Document class="svg" />
  </div>
  <input
    ref="input"
    type="file"
    v-show="false"
    accept=".txt,.doc,.docx,.md"
    @change="readerFile($event.target as HTMLInputElement)"
  />
</template>

<style scoped lang="less">
hr {
  opacity: 0;
  margin: 3px 0;
}

#outline {
  cursor: pointer;
  position: relative;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  border-radius: var(--radius);
  background-color: var(--color1);
  border: 2px dashed var(--color2);
  box-sizing: border-box;
  > .svg {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 60px;
    height: 60px;
    pointer-events: none;
    color: var(--color2);
  }
}
/* 
#result {
  width: 100%;
  height: 300px;
  border-radius: var(--radius);
  background-color: var(--color1);
  border: 2px solid var(--color2);
  box-sizing: border-box;
  color: var(--color3);
}
*/
</style>
